@let poHelper = setHelper(label, additionalHelpTooltip);
<po-field-container
  [p-disabled]="disabled"
  [p-id]="id"
  [p-label]="label"
  [p-optional]="optional"
  [p-required]="required"
  [p-show-required]="showRequired"
  [p-helper]="label ? poHelper.helperSettings : undefined"
  [p-show-helper]="label ? displayAdditionalHelp : undefined"
  [p-size]="size"
  [p-text-wrap]="labelTextWrap()"
>
  <div class="po-field-container-content po-field-container-input" [attr.p-size]="size">
    <div class="po-field-icon-container-left">
      <po-icon
        p-icon="ICON_LOCK"
        class="po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}"
        [class.po-field-icon-disabled]="disabled"
        [class.po-field-icon-aa]="size === 'small'"
      >
      </po-icon>
    </div>

    <input
      #inp
      class="po-input po-input-icon-left"
      [attr.name]="name"
      [autocomplete]="autocomplete"
      [class.po-input-double-icon-right]="clean && inp.value && !hidePasswordPeek"
      [class.po-input-double-icon-right-aa]="clean && inp.value && !hidePasswordPeek && size === 'small'"
      [class.po-input-icon-right]="clean || !hidePasswordPeek"
      [class.po-input-icon-right-aa]="(clean || !hidePasswordPeek) && size === 'small'"
      [class.po-input-icon-left-aa]="size === 'small'"
      [class.po-input-aa]="size === 'small'"
      [disabled]="disabled"
      [id]="id"
      [placeholder]="disabled ? '' : placeholder"
      [readonly]="readonly"
      [required]="required"
      [type]="disabled ? 'password' : type"
      (blur)="eventOnBlur($event)"
      (click)="eventOnClick($event)"
      (focus)="eventOnFocus($event)"
      (input)="eventOnInput($event)"
      (keydown)="onKeyDown($event)"
    />

    <div class="po-field-icon-container-right">
      @if (clean && !disabled && !readonly) {
        <po-clean class="po-icon-input" [p-element-ref]="inputEl" [p-size]="size" (p-change-event)="clear($event)">
        </po-clean>
      }

      @if (!hidePasswordPeek && !disabled) {
        <po-icon
          [p-icon]="visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'"
          class="po-field-icon po-icon-input"
          [class.po-field-icon-aa]="size === 'small'"
          [ngClass]="!visiblePassword ? 'po-field-icon-disabled' : ''"
          [class.po-field-icon-disabled-aa]="size === 'small'"
          (click)="showPassword()"
        >
        </po-icon>
      }
    </div>
    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {
      <po-helper
        #helperEl
        class="po-field-helper-button"
        [p-size]="size"
        [p-helper]="poHelper.helperSettings"
        [p-disabled]="disabled"
        [p-append-in-body]="appendBox"
      >
      </po-helper>
    }
  </div>
  @if (!readonly) {
    <po-field-container-bottom
      [p-help]="help"
      [p-disabled]="disabled"
      [p-error-limit]="errorLimit"
      [p-error-pattern]="getErrorPattern()"
      [p-size]="size"
    >
    </po-field-container-bottom>
  }
</po-field-container>
